<script lang="ts" setup>
import { addQuestion } from '@/api/point';
import type { questionForm, pointForm, tagForm } from '@/api/type';
import { usePointStore } from '@/stores/point';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
const form = ref<questionForm>({
    content: "如果一个标准的六面骰子被掷一次，出现奇数的概率是多少？",
    option1: "1/2",
    option2: "1/3",
    option3: "1/6",
    option4: "2/3",
});
const form2 = ref<questionForm>({});
const knowledgePoints = reactive<pointForm[]>(usePointStore().pointDate);
const tags = reactive<tagForm[]>(usePointStore().tag)
const submitForm = async () => {
    // 提交表单逻辑，可以向后端发送数据
    console.log(form.value);
    let res = await addQuestion(form.value as questionForm);
    ElMessage.success(res.data)
};
const submitForm2 = async () => {
    console.log(form2.value);
    let res = await addQuestion(form2.value as questionForm);
    ElMessage.success(res.data)
};
</script>
<template>
    <div class="main">
        <h3 style="margin-left: 100px;">单选题设置</h3>
        <el-form :model="form" label-width="100px" class="form1">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="题目">
                        <el-input v-model="form.content"></el-input>
                    </el-form-item>
                    <el-form-item label="A">
                        <el-input v-model="form.option1"></el-input>
                    </el-form-item>
                    <el-form-item label="B">
                        <el-input v-model="form.option2"></el-input>
                    </el-form-item>
                    <el-form-item label="C">
                        <el-input v-model="form.option3"></el-input>
                    </el-form-item>
                    <el-form-item label="D">
                        <el-input v-model="form.option4"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属标签">
                        <el-select v-model="form.tagId" placeholder="请选择">
                            <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属知识点">
                        <el-select v-model="form.pointId" placeholder="请选择">
                            <el-option v-for="point in knowledgePoints" :key="point.id" :label="point.name"
                                :value="point.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="答案">
                        <el-select v-model="form.answer" placeholder="请选择">
                            <el-option label="A" value="A"></el-option>
                            <el-option label="B" value="B"></el-option>
                            <el-option label="C" value="C"></el-option>
                            <el-option label="D" value="D"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <div class="main" style="margin-top: 30px;">
        <h3 style="margin-left: 100px;">简答题设置</h3>
        <el-form :model="form2" label-width="100px" class="form1">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="题目">
                        <el-input type="textarea" v-model="form2.content"></el-input>
                    </el-form-item>
                    <el-form-item label="所属标签">
                        <el-select v-model="form2.tagId" placeholder="请选择">
                            <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属知识点">
                        <el-select v-model="form2.pointId" placeholder="请选择">
                            <el-option v-for="point in knowledgePoints" :key="point.id" :label="point.name"
                                :value="point.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="答案">
                        <el-input type="textarea" v-model="form2.option1" placeholder="仅供参考"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm2">提交</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<style scoped>
.main {
    margin: 10px 30px;
    display: flex;
    align-content: c;
    background: cornsilk;
    flex-wrap: wrap;
}

.form1 {
    width: 100%;
}
</style>
